{% extends 'xBlog_admin/admin_base.html' %}
{% load xBlog_filter %}
{% block content %}
    <div id="content-main" style="padding: 15px;" xmlns="http://www.w3.org/1999/html">
        <div class="module filtered" id="changelist">
            <div class="panel panel-default">
                <div class="panel-heading" id="panel-heading">
                    <div id="toolbar" class="pull-left" style="margin-top: -6px;">
                        <form id="changelist-search" action="" method="get">
                            <div><!-- DIV needed for valid HTML -->
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control popover-dismiss" name="q"
                                           style="background: white; border: 1px solid #ccc;" value="" id="searchbar"
                                           placeholder="Search &quot;Articles&quot;" data-container="body"
                                           data-toggle="popover" data-placement="top" data-original-title="" title="">
                        <span class="input-group-btn">
                          <button type="submit" class="btn btn-default" title="Search">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                                </div>

                            </div>
                        </form>
                    </div>

                    <a href="{% url 'blog_articles_add' %}" style="color: white;">
                        <button class="addlink btn btn-primary btn-xs pull-right" title="Add article">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </a>
                </div>

                <form id="changelist-form" action="" method="post" novalidate="">
                    <input type="hidden" name="csrfmiddlewaretoken" class="csrfmiddlewaretoken">
                    <div class="results table-responsive">
                        <table id="result_list" class="table table-striped"
                               style="border-top: 1px solid #ccc;margin-bottom: 0px;">
                            <thead>
                            <tr>
                                <th scope="col" class="sortable column-title">
                                    <div class="text">Title</div>
                                </th>
                                <th scope="col" class="sortable column-catagory">
                                    <div class="text">Catagory</div>
                                </th>
                                <th scope="col" class="sortable column-archive">
                                    <div class="text">Archive</div>
                                </th>
                                <th scope="col" class="sortable column-tag">
                                    <div class="text">Tag</div>
                                </th>
                                <th scope="col" class="sortable column-date_time sorted descending">
                                    <div class="text">Date time</div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for article in articles %}
                                <tr class="{{ forloop.counter|filter_row }}">
                                    <th class="field-title"><a style="text-decoration: none;"
                                                               href="{% url 'blog_articles_change' article_id=article.id %}">{{ article.title }}</a>
                                    </th>
                                    <td class="field-catagory nowrap">{{ article.catagory.catagory_name }}</td>
                                    <td class="field-archive nowrap">{{ article.archive.archive_name }}</td>
                                    <td class="field-archive nowrap">{{ article.tags.all|tags_namelist }}</td>
                                    <td class="field-date_time nowrap">{{ article.date_time|date:"Y-m-d H:i" }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    {% if articles.paginator.num_pages > 1 %}
                        <div class="panel-body actions-bottom" style="background: #f9f9f9;">
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul class="paginator pagination" style="margin: 0px;">
                                        {% for i in articles|iter_pages %}
                                            {% if i %}
                                                <li>
                                                    {% if i == articles.number %}
                                                        <span class="this-page">{{ i }}</span>
                                                    {% else %}
                                                        <a href="?page={{ i }}{% if condition %}&q={{ condition }}{% endif %}">{{ i }}</a>
                                                    {% endif %}
                                                </li>
                                            {% else %}
                                                <li class="disabled">
                                                    <a href="#">...</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <div class="panel-footer" id="panel-footer" style="height: 40px;">
                        <span class="info pull-left">
                          {{ total }}
                          articles
                      </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}